<template>
  <ul class="foucs-msg bg-w fx-h-c">
    <li class="item br">
      <h3>关注了</h3>
      <span class="count">{{ user.follows && user.follows.length }}</span>
    </li>
    <li class="item bl">
      <h3>关注者</h3>
      <span class="count">{{ user.followed && user.followed.length }}</span>
    </li>
  </ul>
</template>

<script>
import { getSessionStorage, parse } from "@/utils/utils";
import { getUserDetail } from "@/api/user";
export default {
  name: "FocusMsg",
  data() {
    return {
      user: {}
    }
  },
  async created() {
    const i = getSessionStorage("cid");
    let id;
    if (i) {
      id = parse(i).id;
    }
     const { data } = await getUserDetail(id);
     this.user = data;
  },
};
</script>

<style lang="scss" scoped>
.foucs-msg {
  padding: 2rem;
  .item {
    &.br {
      padding-right: 4.2rem;
      border-right: 1px solid #eaeaea;
    }
    &.bl {
      padding-left: 4.2rem;
    }
    h3 {
      color: #31445b;
    }
    text-align: center;
    .count {
      font-weight: bold;
    }
  }
}
</style>